<template>
    <div>
        <myHead />
        <div class="main">
            <mySide />
            <div class="top-nav">
                <div class="item" v-for="item in navList" :key="item.value">
                    <div class="img">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="txt">
                        <p>{{item.label}}</p>
                        <p>{{item.num}} <span>天</span></p>
                    </div>
                </div>
                <div class="name">调·度·目·标</div>
            </div>
            <Transition>
                <div class="tan"></div>
            </Transition>
            
        </div>   
        <div class="bot">
            <div class="bg"></div>
            <div class="inner">
                <timeLine />
            </div>
        </div>  
        <div class="map">
            <img src="../assets/images/map.png" alt="" width="1920px" height="1080">
            <div class="mark-box">
                <div class="info-box" v-if="showMark">
                    <p>册田水库</p>
                    <p>补水量：<span>0.82</span>亿m3</p>
                    <div class="line"></div>
                </div>
                <div class="mark">
                    <div class="inner"></div>
                </div>
            </div>
            
        </div>
        <div class="shadow-top"></div>
        <div class="shadow-left"></div>
        <div class="shadow-bot"></div>
    </div>
</template>

<script setup>
    import myHead from '@/components/head.vue'
    import mySide from '@/components/side.vue'
    import timeLine from '@/components/timeLine.vue'
    import {ref} from 'vue'   
    import icon1 from '../assets/images/pic1.png'
    import icon2 from '../assets/images/pic2.png'
    import icon3 from '../assets/images/pic3.png'
    const showMark=ref(true) 
    const navList=ref([]) 
    navList.value=[{
        label:'全线有水',
        value:1,
        icon:icon1,
        num:165
    },{
        label:'全线流动',
        value:2,
        icon:icon2,
        num:197
    },{
        label:'入海流量',
        value:3,
        icon:icon3,
        num:1.146
    }]
    const handleMark=()=>{
        showMark.value=!showMark.value
    }
</script>

<style lang="scss" scoped>

.top-nav{
    position: absolute;
    right:476px;
    top: 85px;
    width: 770px;
    height: 141px;
    background: url(../assets/images/bg3.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    padding: 20px 65px 0;
    flex-wrap: wrap;
    z-index: 999;
    .item{
        display: flex;
        min-width: 30%;
        cursor: pointer;
        .img{
            width: 81px;
            height: 71px;
            background: url(../assets/images/bg4.png) no-repeat center bottom;
            background-size: 100%;
            margin-right: 5px;
            text-align: center;
            padding-top: 10px;
            box-sizing: border-box;
        }
        .txt{
            margin-top: 10px;
            p{
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 16px;
                &:last-child{
                    font-family: DIN;
                    font-weight: bold;
                    font-size: 36px;
                    color: #00FFFF;
                    line-height: 36px;
                    margin-top: 8px;
                    span{
                        font-family: PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #FFFFFF;
                        line-height: 16px;
                    }
                }
            }
        }
    }
    .name{
        width: 150px;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        margin: 18px auto;
        letter-spacing: 5px;
    }
}
.tan{
    position: fixed;
    top: 80px;
    right: 0;
    width: 454px;
    height: 889px;
    background: url(../assets/images/tan.png) no-repeat center;
    background-size: 100% 100%;
    z-index: 999;
}
.bot{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 109px;
    z-index: 999;
    .bg{
        width: 100%;
        height: 29px;
        background-image: linear-gradient(0deg, rgba(11, 129, 211, 0.3) 0%,rgba(11, 129, 211, 0) 95%);
    }
    .inner{
        width: 100%;
        height: 80px;
        background: rgba(255,255,255,0.02);
    }
} 
.map{
    position: relative;
    .mark-box{
        position: absolute;
        top: 500px;
        right: 500px;
        z-index: 9999;
        width: 169px;
        padding-top: 134px;
        .info-box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 89px;
            background: url(../assets/images/bg-t.png) no-repeat center;
            background-size: 100% 100%;
            z-index: 9;
            box-sizing: border-box;
            padding-top: 10px;
            p{
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 18px;
                color: #FFFFFF;
                text-align: center;
                &:nth-child(2){
                    font-weight: 400;
                    font-size: 16px;
                    margin-top: 15px;
                    span{
                        font-size: 20px;
                        color: #00FFFF;
                    }
                }
            }
        }
        .line{
            position: absolute;
            width: 10px;
            height: 88px;
            background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(1,185,248,0.97) 47%, #00249C 100%);
            border-radius: 1px;
            left: 50%;
            transform: translateX(-5px);
            top: 62px;
        }
        .mark{
            width: 51px;
            height: 51px;
            background-image: linear-gradient(90deg, #01B9F8 0%, #00249C 100%);
            border-radius: 50%;
            border: 1px solid #FFFFFF;
            padding: 15px;
            margin: 0 auto;
            cursor: pointer;
            animation: scan2 2s linear infinite;
            .inner{
                width: 21px;
                height: 21px;
                background: #50D7FF;
                border-radius: 50%;
                animation: scan1 2s linear infinite;
            }
        }
    }
    @keyframes scan1 {
        0% {
        transform: scale(0);
        opacity: 1;
        }
    
        50% {
        transform: scale(1.5);
        opacity: 0.5;
        }
    
        100% {
        transform: scale(5);
        opacity: 0;
        }
    }
    @keyframes scan2 {
        0% {
        transform: scale(1);
        opacity: 1;
        }
    
        50% {
        transform: scale(1.2);
        opacity: 0.5;
        }
    
        100% {
        transform: scale(1);
        opacity: 1;
        }
    }
}

.shadow-top{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: url(../assets/images/st.png) no-repeat center top; 
    background-size: 100% 100%;
}
.shadow-left{
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 1080px;
    background: url(../assets/images/sl.png) no-repeat left top; 
    background-size: 100% 100%;
}
.shadow-bot{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: url(../assets/images/sb.png) no-repeat center bottom; 
    background-size: 100% 100%;
}
</style>